<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="./css/form.css">
</head>

<body>
    <div id="app">
        <div class="content">
            <el-row :gutter="20">
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="8"><el-form :model="form" label-width="auto" class="form" style="max-width: 600px" 
                    :label-position="label-position">
                        <el-form-item label="欢迎注册！"></el-form-item>
                        <hr>
                        <el-form-item label="账号">
                            <el-input v-model="form.account" placeholder="请输入您的账号" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password" type="password" placeholder="请输入您的密码" />
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form.name" placeholder="请输入您的姓名"/>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio value="保密">保密</el-radio>
                                <el-radio value="男">男</el-radio>
                                <el-radio value="女">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="兴趣爱好">
                            <el-checkbox-group v-model="form.hobby">
                                <el-checkbox value="听音乐" name="type">
                                    听音乐
                                </el-checkbox>
                                <el-checkbox value="打游戏" name="type">
                                    打游戏
                                </el-checkbox>
                                <el-checkbox value="看书" name="type">
                                    看书
                                </el-checkbox>
                                <el-checkbox value="运动" name="type">
                                    运动
                                </el-checkbox>
                                <el-checkbox value="看动漫" name="type">
                                    看动漫
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="签名档">
                            <el-input v-model="form.desc" type="textarea" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="4"></el-col>
                <el-col :span="4"></el-col>
            </el-row>

            <el-dialog v-model="dialogVisible" title="请确认您的注册信息" width="500">
                <p>账号：{{form.account}}</p>
                <p>密码：{{form.password}}</p>
                <p>姓名：{{form.name}}</p>
                <p>性别：{{form.sex}}</p>
                <p>兴趣爱好：{{form.hobby.join(",")}}</p>
                <p>签名档：{{form.desc}}</p>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                form: {
                    title: "",
                    account: "",
                    password: "",
                    name: "",
                    sex: "",
                    hobby: [],
                    desc: ""
                },
                dialogVisible: false
            }
        },
        methods: {
            onSubmit() {
                console.log(this.form);
                this.dialogVisible = true;
            }
        }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>

</html>